<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>学前网首页</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- nav导航栏 -->
	<div class="nav ">
		<div class="nav_in">
			<div class="logo"><!-- logo -->
				<a href="">学前网</a>
			</div>
			<!-- 导航菜单 -->
			<div class="navbar">
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="">课程</a></li>
					<li><a href="">职业规划</a></li>
				</ul>
			</div>
			<!-- 搜索框 -->
			<div class="search">
				<input type="text" placeholder="输入关键字" >
				<input type="submit" value="">
			</div>
			<!-- 个人中心 -->
			<div class="persion">
				<a href="#" class="me">个人中心</a>
				<a href="#" class="lingdang">铃铛</a>
				<div class="user">
					<a href="" class="icon">头像</a>
					<span>卡门&可乐</span>

				</div>
			</div>

		</div>

	</div>
	<!-- banner部分 -->
	<div class="banner">
		<div class="banner_in centerbanner">
			<div class="b_left">
				<ul>
					<!-- .clearfix清除浮动 -->
					<li class="clearfix"><a href="">前端开发<span>></span></a></li>
					<li class="clearfix"><a href="">后端开发 <span>></span></a></li>
					<li class="clearfix"><a href="">移动开发<span>></span></a></li>
					<li class="clearfix"><a href="">人工智能<span>></span></a></li>
					<li class="clearfix"><a href="">商业预测<span>></span></a></li>
					<li class="clearfix"><a href="">云计算&大数据<span>></span></a></li>
					<li class="clearfix"><a href="">运维&从测试<span>></span></a></li>
					<li class="clearfix"><a href="">UI设计<span>></span></a></li>
					<li class="clearfix"><a href="">产品<span>></span></a></li>
				</ul>
			</div>
			<dl class="timetable">
				<dt>
					我的课程表
					<dd><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></dd>
					<dd><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></dd>
					<dd><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></dd>
					<dd><a href="">全部课程</a></dd>
				</dt>
				
			</dl>
		</div>
	</div>
	<!-- 精品推荐1 -->
	<div class="product centerbanner">
		<a href="">精品推荐</a>
		<a href="">JQurey</a>
		<a href="">Spark</a>
		<a href="">MySql</a>
		<a href="">JavaWeb</a>
		<a href="">Html</a>
		<a href="">Css3</a>
		<a href="">修改兴趣</a>
	</div>
	<!-- 固定定位的 -->
	<img class="ad" src="images/fix_03.png" alt="">
	<!-- 精品推荐2 -->
	<div class="pro2 centerbanner clearfix">
		<div class="pro-top">
			精品推荐
			<a href="">查看全部</a>
		</div>
		<div class="pro-shiping">
			<ul>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>
				<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
					<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
					<p><span>高级</span>   1125人在学习</p>
				</li>

			</ul>
		</div>
	</div>
	<!-- 编程入门 -->
	<div class="pgm1 centerbanner clearfix">
		<div class="pgm1-top">
			<span>编程入门</span>
			<a class="first" href="">热门</a>
			<a href="">初级</a>
			<a href="">中级</a>
			<a href="">高级</a>
			<a href="">查看全部</a>
		</div>
		<div class="pgm1-l">
			<img src="images/php_03.png" height="392" width="228" alt="">
		</div>
		<div class="pgm1-r">	
			<div class="pgm1-rtop">
				<img src="images/pgm1-rtop_05.png" height="100" width="957" alt="">
			</div>
			<div class="pgm1-bottom">
				<ul>
					<li>
						<a href="">
							<img src="images/icon1.png" height="155" width="233" alt=""></a>  			
							<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
							<p><span>高级</span>   1125人在学习</p>
						</li>
						<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
							<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
							<p><span>高级</span>   1125人在学习</p>
						</li>
						<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
							<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
							<p><span>高级</span>   1125人在学习</p>
						</li>
						<li><a href=""><img src="images/icon1.png" height="155" width="233" alt=""></a>
							<h4>Think PHP 5.0 博客系统实战项目演练  </h4>
							<p><span>高级</span>   1125人在学习</p>
						</li>
					</ul>
				</div>
			</div>

		</div>
	<!-- 牛人推荐 -->
	<div class="gp centerbanner">
			<div class="gp-top">
				牛人推荐
			</div>
			<div class="gp-center">
				<ul>
					<li>
						<div class="gp-center-id">
							<h4>吴老师&nbsp   <span>   java EE</span></h4>
							<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
						</div>

					</li>
					<li>
						<div class="gp-center-id">
							<h4>吴老师&nbsp   <span>   java EE</span></h4>
							<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
						</div>

					</li>
					<li>
						<div class="gp-center-id">
							<h4>吴老师&nbsp   <span>   java EE</span></h4>
							<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
						</div>

					</li>
					<li>
						<div class="gp-center-id">
							<h4>吴老师&nbsp   <span>   java EE</span></h4>
							<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
						</div>

					</li>
					<li>
						<div class="gp-center-id">
							<h4>婷老师&nbsp   <span>   java EE</span></h4>
							<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
						</div>


					</li>

				</ul>
			</div>
			<div class="gp-b">
				<div class="gp-b-l">
                 <h4>毕业季<br> <span>带你华丽转身</span></h4>
                 <p><a href="">点击查看</a></p>
				</div>
				<div class="gp-b-r">
					<ul>
						<li>
							<div class="gp-center-id">
								<h4>婷老师&nbsp   <span>   java EE</span></h4>
								<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
							</div>

						</li>
						<li>
							<div class="gp-center-id">
								<h4>婷老师&nbsp   <span>   java EE</span></h4>
								<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
							</div>

						</li>
						<li>
							<div class="gp-center-id">
								<h4>婷老师&nbsp   <span>   java EE</span></h4>
								<p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
							</div>

						</li>

					</ul>
				</div>	
			</div>

		</div>

		<!-- 底部 -->
		<div class="footer">
			<div class="footer-in centerbanner">
				<div class="in-l">
					<img src="images/footer_logo.png" height="42" width="196" alt="">
					<p class="bah">学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
						© 2020年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
						<p class="app"><a href="">下载APP</a></p>
					</div>
					<div class="in-r">
						<dl>
							<dt>
								关于学成网
								<dd><a href="">关于</a></dd>
								<dd><a href="">管理团队</a></dd>
								<dd><a href="">客服中心</a></dd>
								<dd><a href="">帮助</a></dd>
							</dt>
						</dl>
						<dl>
							<dt>
								关于学成网
								<dd><a href="">可乐&卡门</a></dd>
								<dd><a href="">卡门卡门</a></dd>
								<dd><a href="">可乐可乐</a></dd>
								<dd><a href="">llove</a></dd>
							</dt>
						</dl>
						<dl>
							<dt>
								合作伙伴
								<dd><a href="">合作机构</a></dd>
								<dd><a href="">合作导师</a></dd>

							</dt>
						</dl>
					</div>

				</div>
			</div>

		</body>
		</html>